<template>
    <rx-dialog @ok="handOk" @cancel="cancel">
        <RxVueMonaco
            ref="jsMonaco"
            :value="jsScript"
            language="javascript"
            class="monacoEditor"
            style="height: 100%"
            @change="valueChange"
        >
            <template #toolbar>
                <div>
                    <a-dropdown :getPopupContainer="p=>p.parentNode">
                        <template #overlay>
                            <a-menu>
                                    <a-menu-item @click="addAjax('get')">get</a-menu-item>
                                    <a-menu-item @click="addAjax('postForm')">postForm</a-menu-item>
                                    <a-menu-item @click="addAjax('postJson')">postJson</a-menu-item>
                            </a-menu>
                        </template>
                        <a-button style="margin-left: 8px" size="small">{{ insertScriptI18n('insertAjax', '插入AJAX函数') }}
                            <DownOutlined />
                        </a-button>
                    </a-dropdown>
                    <a-button size="small" style="margin-left: 8px" @click="addInvokeCustomQuery">
                        {{ insertScriptI18n('insertQuery', '插入调用查询') }}
                    </a-button>
                    <a-button size="small" style="margin-left: 8px" @click="addInvokeScript">
                        {{ insertScriptI18n('insertScript', '插入调用脚本') }}
                    </a-button>
                </div>
            </template>
        </RxVueMonaco>
    </rx-dialog>
</template>

<script>
import {RxDialog, Util, RxVueMonaco} from "@lowcode/jpaas-base-lib";
import scriptInsert from "@/views/modules/design/js/script-insert";

export default {
    name: "custom-chart-config",
    mixins: [scriptInsert],
    props: {
        config: {
            type: Object
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxDialog,
        RxVueMonaco
    },
    data() {
        return {
            jsScript: "export default {\n" +
                "   //" + this.insertScriptI18n('defaultJsDesc1', '数据定义') + "\n" +
                "    data(){\n" +
                "        return {\n" +
                "        }\n" +
                "    },\n" +
                "    //" + this.insertScriptI18n('defaultJsDesc2', '初始化时加载') + "\n" +
                "    created(){\n" +
                "    },\n" +
                "    //" + this.insertScriptI18n('defaultJsDesc3', '页面自定义函数') + "\n" +
                "    methods:{\n" +
                "        /**\n" +
                "         * option" + this.insertScriptI18n('defaultJsDesc4', '为配置项') + "\n" +
                "         */\n" +
                "       setOption(){\n" +
                "            this.option={\n" +
                "              \n" +
                "            }\n" +
                "       }\n" +
                "    },\n" +
                "    //" + this.insertScriptI18n('defaultJsDesc5', '页面自定义观察函数') + "\n" +
                "    watch:{}\n" +
                "}",
        }
    },
    mounted() {
        if (this.config && this.config.customConfig.jsScript) {
            this.jsScript = this.config.customConfig.jsScript;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customChartLang", key);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        handOk() {
            Util.closeWindow(this, "ok", this.jsScript);
        },
        valueChange(value) {
            this.jsScript = value;
        }
    },
}
</script>

<style scoped>
.monacoEditor {
    margin: 0px 10px;
    width: calc(100% - 20px) !important;
    height: 95% !important;
}
</style>
